<template>
  <div class="home">
    <main>
      <section>
        <div class="banner">
          <!-- 首页轮播图 -->
          <a-carousel
            arrows
            effect="fade"
            easing="ease-in-out"
            autoplay
            :autoplay-speed="5000"
            lazy-load
          >
            <!-- 自定义小点 -->
            <span slot="customPaging" />
            <!-- 左箭头 -->
            <div
              slot="prevArrow"
              class="custom-slick-arrow"
              style="left: 120px;zIndex: 1"
            >
              <a-icon type="left" />
            </div>
            <!-- 右箭头 -->
            <div
              slot="nextArrow"
              class="custom-slick-arrow"
              style="right: 120px;zIndex: 1"
            >
              <a-icon type="right" />
            </div>
            <!-- 轮播主体循环 -->
            <div
              v-for="item in bannerList"
              :key="item.targetId"
              class="img_wrap"
            >
              <div
                class="img_background"
                :style="{
                  background: `url(${item.imageUrl})`
                }"
              />
              <div class="img_box">
                <img :src="item.imageUrl" :alt="item.typeTitle" />
              </div>
            </div>
          </a-carousel>
        </div>
      </section>
      <section class="marginAuto ">
        <a-row>
          <a-col :span="18">
            <!-- 左侧区域 -->
            <div class="left-sec ">
              <div class="hot-push">
                <div class="hot-push_head clearfix">
                  <h4 class="section_title fl">热门推荐</h4>
                  <p class="fl">
                    <i
                      v-for="item in hotPush_tags.slice(0, 5)"
                      :key="item.usedCount"
                    >
                      <a-button type="link" size="large">
                        {{ item.name }}
                      </a-button>
                      <span v-show="item.name !== '电子'">|</span>
                    </i>
                  </p>
                  <div class="more fr">更多</div>
                </div>
                <div class="hot-push_main ">
                  <ul class="clearfix">
                    <li v-for="item in hotPush" :key="item.id" class="fl">
                      <div class="music_img">
                        <img
                          :src="item.picUrl + '?param=140y140'"
                          :alt="item.name"
                        />
                        <a href="" class="img_msk"></a>
                        <div class="img_sec  clearfix">
                          <i class="fl"></i>
                          <span class="fl"
                            >{{ parseInt(item.playCount / 10000) }}万</span
                          >
                          <a class="fr"></a>
                        </div>
                      </div>

                      <p class="music_title">
                        <a href="">{{ item.name }}</a>
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="new_music ">
                <div class="new_music-head  clearfix">
                  <h4 class="section_title fl">新碟上架</h4>
                  <div class="more fr">更多</div>
                </div>
                <div class="new_music-main">
                  <a-carousel
                    arrows
                    :dots="false"
                    :slides-to-show="5"
                    :slides-to-scroll="5"
                    lazy-load
                  >
                    <div
                      slot="prevArrow"
                      class="custom-slick-arrow"
                      style="left: -6px;zIndex: 1;top:50px;"
                    >
                      <a-icon type="left" />
                    </div>
                    <div
                      slot="nextArrow"
                      class="custom-slick-arrow"
                      style="right: -24px;top:50px;zIndex: 1;"
                    >
                      <a-icon type="right" />
                    </div>
                    <!-- <n-link to="" tag="li" no-prefetch>朋友</n-link> -->
                    <div
                      v-for="item in newEst.slice(0, 10)"
                      :key="item.id"
                      class="musicBox"
                    >
                      <div class="musicBox_img">
                        <img :src="item.picUrl" :alt="item.name" />
                        <n-link
                          :to="{
                            name: 'index-album-id',
                            params: { id: item.id }
                          }"
                          no-prefetch
                          class="img_msk"
                        ></n-link>
                        <i class="icon" />
                      </div>
                      <div class="musicBox_text">
                        <h5>
                          <n-link
                            :to="{
                              name: 'index-album-id',
                              params: { id: item.id }
                            }"
                            no-prefetch
                            >{{ item.name }}</n-link
                          >
                        </h5>
                        <p>
                          <n-link
                            :to="{
                              name: 'index-album-id',
                              params: { id: item.id }
                            }"
                            no-prefetch
                          >
                            {{ item.artists[0].name }}</n-link
                          >
                        </p>
                      </div>
                    </div>
                  </a-carousel>
                </div>
              </div>
            </div>
          </a-col>
          <!-- 右侧区域 -->
          <a-col :span="6">
            <div class="right-sec ">
              <div v-if="!userinfo.avatarUrl" class="login_box">
                <p>
                  登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
                </p>
                <a-button type="danger" @click="login_box = true">
                  用户登录
                </a-button>
                <login-box :loging-modal="login_box" @changeShow="changeShow" />
              </div>
              <div v-else class="user_box">
                <div class="user_box-top clearfix">
                  <a-avatar
                    shape="square"
                    :size="80"
                    class="fl"
                    :src="userinfo.avatarUrl"
                  />
                  <div class="user_box-top_right fl">
                    <p class="user_name">{{ userinfo.nickname }}</p>
                    <a-button type="primary" @click="logout"
                      >退出登录
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </section>
    </main>
  </div>
</template>

<script>
import LoginBox from '@/components/login'
export default {
  components: {
    LoginBox
  },
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error
  }) {
    const bannerList = await store.dispatch('homeBanner') //* 首页轮播图
    const hotPush = await store.dispatch('hotPush', { limit: 8 }) //* 首页热门推荐
    const hotPushTags = await store.dispatch('hotPush_tags') //* 首页热门推荐的标签
    const newEst = await store.dispatch('newEst')
    return {
      bannerList: bannerList.banners,
      hotPush: hotPush.result,
      hotPush_tags: hotPushTags.tags,
      newEst: newEst.albums
    }
  },
  data() {
    return {
      bannerList: [],
      hotPush: [],
      hotPush_tags: [],
      login_box: false,
      newEst: []
    }
  },
  computed: {
    userinfo() {
      return this.$store.state.userinfo.profile
    }
  },
  methods: {
    changeShow(val) {
      this.login_box = val
    },
    async logout() {
      await this.$store.dispatch('logout')
      this.$message.success({
        content: '退出成功',
        duration: 1.5,
        onClose: () => {
          history.go(0)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  color: #333;
  main {
    background: #f5f5f5;
    .marginAuto {
      width: 1004px;
      background: #fff;
      border-left: 1px solid #d3d3d3;
      border-right: 1px solid #d3d3d3;
      border-width: 0 1px;
      margin: 0 auto;
    }
    .banner {
      height: 370px;
      overflow: hidden;
      /deep/.ant-carousel {
        .slick-slider {
          .custom-slick-arrow {
            width: 30px;
            height: 60px;
            font-size: 32px;
            line-height: 65px;
            color: #fff;
          }
          :before {
            display: none;
          }
          .custom-slick-arrow:hover {
            background: rgba($color: #000000, $alpha: 0.2);
          }
          .slick-dots {
            margin-bottom: 16px;
            li {
              padding: 8px;
              span {
                display: block;
                background: rgba($color: #fff, $alpha: 0.6);
                width: 8px;
                height: 8px;
                border-radius: 4px;
              }
            }
            .slick-active {
              span {
                background: rgba($color: #c20c0c, $alpha: 0.8);
              }
            }
          }
          .slick-slide {
            height: 370px;
            width: 100%;
            overflow: hidden;
            .img_wrap {
              position: relative;
              height: 370px;
              .img_background {
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                background-size: 4000px !important;
                width: 100%;
                height: 370px;
                background-position: center center !important;
                filter: blur(18px) brightness(88%);
                -webkit-filter: blur(18px) brightness(88%);
                -moz-filter: blur(18px) brightness(88%);
                -ms-filter: blur(18px) brightness(88%);
              }
              .img_box {
                width: 1004px;
                margin: 0 auto;
                img {
                  width: 100%;
                  height: auto;
                }
              }
            }
          }
        }
      }
    }
    .left-sec {
      border-right: 1px solid #d3d3d3;
      border-width: 0 1px;

      .hot-push {
        padding: 20px 20px 0;
        &_head {
          border-bottom: 2px solid #c10d0c;
          margin-bottom: 20px;
          p {
            margin-left: 10px;
            color: #666 !important;
            .ant-btn-link {
              height: 36px;
              font-size: 12px !important;
              color: #666;
            }
            /deep/ .ant-btn-link:hover span {
              color: #666 !important;
              text-decoration: underline !important;
            }
          }
          p > span {
            color: #d4d4d4;
          }
        }
        &_main {
          ul {
            margin-left: -42px;
            li {
              padding: 0 0 30px 42px;
              width: 188px;
              height: 234px;
              overflow: hidden;
              .music_img {
                display: block;
                width: 140px;
                height: 140px;
                position: relative;
                img {
                  width: 100%;
                  height: auto;
                }
                .img_msk {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  display: block;
                  top: 0;
                  left: 0;
                  background: url('~assets/img/coverall.png') no-repeat 0 0;
                }
                .img_sec {
                  color: #ccc;
                  height: 27px;
                  width: 100%;
                  background: url('~assets/img/coverall.png') no-repeat 0 -537px;
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  i {
                    display: block;
                    width: 14px;
                    height: 11px;
                    background: url('~assets/img/iconall.png') no-repeat 0 -24px;
                    margin: 9px 5px 9px 10px;
                  }
                  span {
                    line-height: 27px;
                  }
                  a {
                    display: block;
                    width: 16px;
                    height: 17px;
                    margin: 5px 8px 0;
                    background: url('~assets/img/iconall.png') no-repeat 0 0;
                  }
                  :hover {
                    background-position: 0 -60px;
                  }
                }
              }
              .music_title {
                margin-top: 6px;
                font-size: 14px;
                line-height: 16px;
                a {
                  max-width: 100%;
                  color: #333;
                  vertical-align: middle;
                }
                :hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
      .new_music {
        padding: 20px 20px 0;
        margin-bottom: 50px;
        &-head {
          border-bottom: 2px solid #c10d0c;
          margin-bottom: 20px;
        }
        &-main {
          width: 100%;
          height: 180px;
          background: #f5f5f5;
          border: 1px solid #d3d3d3;
          padding: 20px 26px 0;
          /deep/.ant-carousel {
            margin-left: -20px;
            /deep/.slick-slide {
              overflow: hidden;
              height: 146px;
              // width: 108px !important;
              // margin-left: 20px;
              padding-left: 17px;
              .musicBox {
                height: 146px;
                background: url('~assets/img/index.png') no-repeat -260px 100px;
                &_img {
                  width: 118px;
                  height: 100px;
                  padding-right: 18px;
                  margin-bottom: 7px;
                  position: relative;
                  .img_msk {
                    position: absolute;
                    z-index: 1;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: url('~assets/img/coverall.png') no-repeat 0 -570px;
                  }
                  img {
                    width: 100%;
                    height: auto;
                  }
                  .icon {
                    background: url('~assets/img/iconall.png') no-repeat 0 -85px;
                    width: 22px;
                    height: 22px;
                    position: absolute;
                    z-index: 3;
                    right: 24px;
                    bottom: 4px;
                    display: none;
                  }
                  .icon:hover {
                    background-position: 0px -110px;
                  }
                }
                .musicBox_img:hover .icon {
                  display: block;
                }
                &_text {
                  a:hover {
                    text-decoration: underline;
                  }
                  h5 {
                    font-size: 14px;
                    line-height: 18px;
                    a {
                      display: block;
                      width: 90%;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      color: #000;
                    }
                  }
                  p {
                    a {
                      display: block;
                      width: 90%;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      color: #666;
                      font-size: 12px;
                    }
                  }
                }
              }
            }
            .custom-slick-arrow {
              width: 14px;
              height: 14px;
              font-size: 14px;
              font-weight: bold;
              color: #333;
            }
            ::before {
              display: none;
            }
          }
        }
      }
      .section_title {
        font-size: 20px;
        font-weight: normal;
        line-height: 28px;
        padding-left: 35px;
        position: relative;
      }
      .section_title::before {
        content: '';
        zoom: 1;
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        background: url('~assets/img/index.png') no-repeat -225px -156px;
        left: 0;
        top: 0;
      }
      .more {
        color: #666;
        font-size: 12px;
        line-height: 36px;
        padding-right: 16px;
        position: relative;
      }
      .more::before {
        content: '';
        zoom: 1;
        width: 12px;
        height: 12px;
        position: absolute;
        right: 2px;
        top: 12px;
        background: url('~assets/img/index.png') no-repeat 0 -240px;
      }
    }
    .right-sec {
      .login_box {
        color: #666;
        background: url('~assets/img/index.png') no-repeat 0 0;
        width: 250px;
        height: 126px;
        padding: 16px 22px;
        font-size: 12px;
        line-height: 22px;
        .ant-btn {
          display: block;
          margin: 16px auto 0;
          color: #fff;
          text-shadow: 0 1px 0 #8a060b;
          height: 31px;
          line-height: 31px;
          font-size: 12px;
          width: 100px;
        }
        .ant-btn-danger {
          background: transparent url('~assets/img/index.png') no-repeat 0 -195px;
          border: 0;
        }
      }
      .user_box {
        padding: 20px;
        width: 100%;
        height: 130px;
        background: url('~assets/img/index.png') no-repeat 0 -270px;
        .user_box-top_right {
          margin-left: 20px;
          .user_name {
            font-weight: 600;
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
          }
          .ant-btn {
            color: #fff;
            width: 100px;
          }
        }
      }
    }
  }
}
</style>
